<template>
    <div class="state-box" :class="ggclass" :style="{ color: stateColor[gg_status], cursor: isDisabled ? 'not-allowed' : 'pointer' }" @click="onClick">
        <slot>
            未知
        </slot>
    </div>
</template>

<script>
export default {
    name: "qg-text-state",
    inject: {
        elForm: {
            default: "",
        },
    },
    props: {
        state: {
            type: [Number, String],
            default: "0",
        },
        ggclass: {
            type: String,
            default: "",
        },
        stateBack: {
            type: Array,
            default: () => ["#dcfbd1", "#f5f5f5", "#e7eefc", "#fbe1e3"],
        },
        stateColor: {
            type: Array,
            default: () => ["#3db728", "#999999", "#3e79f7", "#f5434d"],
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        gg_status() {
            return Number(this.state);
        },
        isDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
        },
    },
    methods: {
        onClick(e) {
            if (this.isDisabled) return;
            this.$emit("click", e);
        },
    },
};
</script>

<style lang="less" scoped>
.state-box {
    display: inline-flex;
    align-items: center;
}
</style>
